<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route: function (newValue, oldValue) {
      // console.log(this);
      // console.log('newValue: ', newValue);
      // console.log('oldValue: ', oldValue);
      if (newValue.meta.index > oldValue.meta.index) {
        this.transitionName = 'slide-left'
        // console.log('离开主路由');
      }else if (newValue.meta.index == oldValue.meta.index) {
        this.transitionName = ''
        // console.log('在主路由上');
      }else {
        this.transitionName = 'slide-right'
        // console.log('进入主路由');
      }
    }
  },
  created() {
    // 程序刷新的时候，也要获取角标信息
    this.$store.dispatch('getCarData')

    
    // 在app中created钩子中每个刷新会执行一次，所有的路由都是通过这个组件进行的，这个组件注销，程序也停止
    /**
     * 在程序刚创建或刷新的时候，判断用户是否登录 isToken
     * */ 
    if (this.$store.getters.getIsLogin) {
      // 如果用户已登录，执行vuex中的actives方法
      this.$store.dispatch('getInfo')
    }
  }
};
</script>

<style lang="scss">
// 进入时的动画
.page-dh-enter,
.page-dh-leave-to {
  transform: translateX(100%); opacity: 0;
}
.page-dh-enter-active,
.page-dh-leave-active {
  transition: all 1 ease;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    height: 100%;
    // will-change: transform;
    transition: all 800ms;
    position: absolute;
    // backface-visibility: hidden;
}

// 动画将要进场时的样式
.slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
